<template>
  <el-container class="main_container">
    <el-header>
      <div class="header_left">
        <div style="display:inline-block">
          <img src="../../assets/logo.png" alt="Logo" />
        </div>
        <div style="display:inline-block">Vue - Mall - 电子商城</div>
        <div style="display:inline-block;margin-left:100px">
          <el-menu
            :default-active="$route.name"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
          >
            <el-menu-item index="search">首页</el-menu-item>
            <el-menu-item index="welcome" disabled>个人信息</el-menu-item>
            <el-menu-item index="myCart">
              <i class="el-icon-shopping-cart-2"></i>购物车
            </el-menu-item>
            <el-menu-item index="myOrder">我的订单</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div>
        <el-tooltip effect="dark" content="待开发" placement="bottom" :enterable="false">
          <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
        </el-tooltip>
        <el-button style="margin-left:30px;" type="info" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {
    logout() {
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.main_container {
  height: 100%;
  background-color: darkslategrey;
}

.el-header {
  background-color: #545c64;
  display: flex;
  justify-content: space-between;
  color: wheat;
  > div {
    display: flex;
    align-items: center;
  }
  .el-menu {
    border-bottom: none;
  }
}
</style>
